<template>
	<!-- 学成在线页面 -->
	<div class="wraper">
		<header class="header w clearfix">
			<div class="logo">logo图片</div>
			<nav class="nav">
				<ul class="clearfix">
					<li v-for="item in 3"><a href="#" id="">首页</a></li>
				</ul>
			</nav>
			<div class="search">
				<input placeholder="请输入关键字" type="text" />
				<button>搜索</button>
			</div>
			<div class="avatar clearfix">
				<div class="img-avtar"></div>
				<span>user</span>
			</div>
		</header>
		<section class="content">
			<div class="w clearfix">
				<div class="left fl">
					<ul>
						<li v-for="item in 9">
							<a href="#" class="clearfix">
								前端开发
								<span class="fr">&gt;</span>
							</a>
						</li>
					</ul>
				</div>
				<div class="right fr">
					<div class="top">我的课程表</div>
					<div class="middle">
						<dl v-for="item in 3">
							<dt>继续学习 程序设计语言</dt>
							<dd>正在学习-使用对象</dd>
						</dl>
					</div>
					<div class="bottom">全部课程</div>
				</div>
			</div>
		</section>
		<section class="goods w clearfix">
			<ul class="fl clearfix">
				<li v-for="item in 5" class="fl"><a href="#">精品推荐</a></li>
			</ul>
			<a class="fr" href="#">修改兴趣</a>
		</section>
		<section class="jingpin w">
			<div class="title clearfix">
				<div class="title-l fl">
					<a href="#">精品推荐</a>
				</div>
				<div class="title-r fr">
					<a href="#">查看更多</a>
				</div>
			</div>
			<ul class="course-list clearfix">
				<li v-for="item in 10" class="fl">
					<div class="banner"></div>
					<h3>Think PHP 5.0 博客系统<br />实战项目演练</h3>
					<p>
						<span class="">高级</span>
						<span class="dot">&nbsp;.&nbsp;</span>1125人学习
					</p>
				</li>
			</ul>
		</section>
		<footer class="footer">
			<div class="w clearfix">
				<div class="footer-l fl">
					<img src="../../assets/logo.jpg" alt="" />
					<p>
						学成在线致力于普及中国最好的教育，它与中国一流大学和机构合作提供在线课程。
						<br />
						@ 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号
					</p>
					<a href="#" class="download-app">下载App</a>
				</div>
				<div class="footer-r fr">
					<dl v-for="item in 3" class="fl dt-block">
						<dt>关于学成网</dt>
						<dd>关于</dd>
						<dd>管理团队</dd>
						<dd>工作机会</dd>
						<dd>客户服务</dd>
						<dd>帮助</dd>
					</dl>
				</div>
			</div>
		</footer>
	</div>
</template>
<style scoped>
body {
	background-color: #ccc;
}
.fl {
	float: left;
}
.fr {
	float: right;
}
.w {
	width: 1200px;
	margin: 0 auto;
}

a {
	text-decoration: none;
}

.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

.header {
	/* background-color: pink; */
	height: 50px;
	margin: 20px auto;
	padding: 0 10px;
}
.header .logo {
	width: 200px;
	height: 40px;
	margin: 5px 0;
	background-color: skyblue;
	float: left;
	text-align: center;
}
.header .nav {
	float: left;
	margin-left: 20px;
}
.header .nav li {
	float: left;
}
.header .nav li a {
	margin-right: 15px;
	padding: 0 6px;
	height: 50px;
	line-height: 50px;
	display: block;
}

.header .nav li a:hover {
	transition: all 0.3s;
	border-bottom: 1px solid skyblue;
}

.search {
	margin: 5px 0;
	float: left;
	width: 362px;
	height: 38px;
	border: 1px solid skyblue;
}

.search input {
	width: 310px;
	padding-left: 25px;
	height: 38px;
	border: 0;
}

input:focus {
	outline: none;
}

.search button {
	float: right;
	width: 50px;
	height: 38px;
	background-color: skyblue;
	border: none;
}
.avatar {
	float: right;
	height: 38px;
	line-height: 38px;
	margin: 7px 0;
}
.img-avtar {
	float: left;
	width: 38px;
	height: 38px;
	background-color: orange;
	border-radius: 50%;
}
.avatar span {
	margin-left: 6px;
}

.content {
	height: 420px;
	background: url("../../assets/banner.jpg");
}
.content .left {
	width: 190px;
	height: 420px;
	color: #fff;
	background-color: rgba(0, 0, 0.3);
}
.content .left li {
	padding: 0 10px;
	height: calc(420px / 9);
	line-height: 40px;
}
.content .left li a:hover {
	color: skyblue;
}
.content .left li a {
	color: #fff;
}
.content .right {
	width: 260px;
	height: 300px;
	background-color: #fff;
	margin-top: 30px;
}
.content .right .top {
	height: 40px;
	line-height: 40px;
	text-align: center;
	background-color: skyblue;
}
.content .right .middle {
	background-color: #fff;
	padding: 0 20px;
}
.content .right .middle dl {
	border-bottom: 2px solid red;
	padding: 10px 0;
}
.content .right .bottom {
	background-color: #fff;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border: 1px solid orange;
	margin: 15px 15px 0 15px;
}
.goods {
	height: 60px;
	line-height: 60px;
	margin-top: 20px;
	background-color: #fff;
	padding: 0 20px;
}
.goods ul li {
	margin-right: 10px;
}
.goods ul li a {
	border-right: 1px solid #ccc;
	padding: 0 10px;
	font-size: 16px;
	color: #000;
}
.goods ul li:first-child a {
	color: skyblue;
}
.goods ul li:last-child a {
	border-right: 0;
}
.jingpin .title {
	margin-top: 10px;
}
.jingpin .title .title-l a {
	font-size: 20px;
	color: #000;
}
.jingpin .title-r a {
	font-size: 14px;
	color: #000;
	margin-right: 20px;
}
.course-list {
	margin-top: 10px;
}
.course-list li {
	width: 228px;
	height: 270px;
	margin: 0 12px 12px 0;
	background-color: #fff;
}
.course-list li:hover {
	box-shadow: 0px 2px 3px 0px rgba(118, 118, 118, 0.2);
}
.course-list .banner {
	width: 228px;
	height: 155px;
	background-color: pink;
}
.course-list h3 {
	font-size: 14px;
	padding: 20px;
}
.course-list p span {
	color: #ff7c2d;
}
.course-list p {
	font-size: 12px;
	font-weight: 400;
	padding: 0 20px;
	color: skyblue;
	padding-bottom: 10px;
}
.course-list p .dot {
	color: skyblue;
	display: inline-block;
}
.footer {
	margin-top: 30px;
	height: 417px;
	background-color: #fff;
}
.footer .footer-l {
	margin-top: 30px;
}
.footer .download-app {
	display: block;
	width: 120px;
	margin-top: 10px;
	text-align: center;
	border: 1px solid skyblue;
	color: skyblue;
	padding: 10px;
}
.footer .footer-r {
	margin-top: 30px;
}
.footer .dt-block {
	line-height: 20px;
	margin-right: 20px;
}
.footer .dt-block dt {
	font-size: 16px;
}
.footer .dt-block dd {
	font-size: 12px;
}
</style>
